<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="1">
        <el-form>
          <el-row>
            <el-col :span="10">
              <el-form-item label="接口名称:">
                {{ rowInfo.apiName }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="接口编码:">
                {{ rowInfo.apiCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="请求方式:">
                {{ rowInfo.httpRequestMethod }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="请求路径:">
                {{ rowInfo.apiUrl }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="接口类型:">
                {{ selectDictLabel(apiTypeOptions, rowInfo.apiType) }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所属应用:">
                {{ rowInfo.appName }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-top: 20px">
            <el-col :span="10">
              <el-form-item label="慢响应时间:">
                {{ rowInfo.alarmSecs + ' 秒' }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="超时时间:">
                {{ rowInfo.timeoutSecs + ' 秒' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="失败重试次数:">
                {{ rowInfo.retryTimes }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="限流策略:">
                {{ rowInfo.mockUrl }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="创建人:">
                {{ rowInfo.createBy }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建时间:">
                {{ rowInfo.createTime }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="更新人:">
                {{ rowInfo.updateBy }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="更新时间:">
                {{ rowInfo.updateTime }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="请求头" name="2">
        <div class="qqt-title">
          <span class="label">请求头参数</span>
        </div>
        <el-table :data="reqHeaderList" style="margin: 10px 0">
          <el-table-column label="参数名" prop="nodeName" width="150" />
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="150"
          />
          <el-table-column label="参数类型" prop="nodeType" width="150">
            <template v-slot="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否必须" prop="nodeNeededable">
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否必填" prop="nodeValueable">
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeValueable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="校验规则"
            prop="nodeCheckRegex"
            :show-overflow-tooltip="true"
            min-width="200"
          />
        </el-table>
        <div class="qqt-title">
          <span class="label">响应头参数</span>
        </div>
        <el-table :data="resHeaderList" style="margin: 10px 0">
          <el-table-column label="参数名" prop="nodeName" width="150" />
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column label="参数类型" prop="nodeType" width="150">
            <template v-slot="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            prop="nodeNeededable"
            :show-overflow-tooltip="true"
            min-width="150"
          >
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="输入参数" name="3">
        <template>
          <span class="title">参数形式：</span>
          <el-radio>{{
            rowInfo.apiParamsBody === "1" ? "Raw" : "FormData"
          }}</el-radio>
          <span class="title">支持参数属性：</span>
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="rowInfo.inparamWithAttr || ''"
          />
        </template>
        <el-table
          style="margin: 10px 0"
          row-key="nodeId"
          default-expand-all
          :data="rowInfo.inParamList || []"
        >
          <el-table-column
            label="参数名"
            prop="nodeName"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template v-slot="scope">
              <div style="display: inline-block">
                <span>{{ scope.row.nodeName }}</span>
                <el-tag size="mini" v-if="scope.row.isAttr === 'Y'"
                  >属性</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column label="参数类型" prop="nodeType" width="140">
            <template v-slot="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            prop="nodeNeededable"
            width="80"
            align="center"
          >
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="是否必填"
            prop="nodeValueable"
            width="80"
            align="center"
          >
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeValueable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="校验规则"
            prop="nodeCheckRegex"
            :show-overflow-tooltip="true"
            min-width="100"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="输出参数" name="4">
        <template>
          <span class="title">支持参数属性：</span>
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="rowInfo.outparamWithAttr || ''"
          />
        </template>
        <el-table
          style="margin: 10px 0"
          row-key="nodeId"
          default-expand-all
          :data="rowInfo.outParamList || []"
        >
          <el-table-column
            label="参数名"
            prop="nodeName"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template v-slot="scope">
              <div style="display: inline-block">
                <span>{{ scope.row.nodeName }}</span>
                <el-tag size="mini" v-if="scope.row.isAttr === 'Y'"
                  >属性</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column label="参数类型" prop="nodeType" width="140">
            <template v-slot="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            prop="nodeNeededable"
            width="80"
            align="center"
          >
            <template v-slot="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="版本清单" name="5" v-if="showVersion">
        <el-table style="margin: 10px 0" row-key="nodeId" :data="versionList">
          <el-table-column label="版本号" prop="apiVersion" width="70">
            <template v-slot="scope">
              <div>
                <span>{{ `V${scope.row.apiVersion}` }}</span>
                <el-tag
                  size="mini"
                  v-if="rowInfo.apiMasterVersion === scope.row.apiVersion"
                  >主</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="服务URL"
            prop="apiUrl"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="版本描述"
            prop="apiVerDesc"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="请求方式"
            prop="httpRequestMethod"
            width="80"
          />
          <el-table-column
            label="状态"
            align="center"
            prop="apiVerStatus"
            width="80"
          >
            <template v-slot="scope">
              <status-tag :status="scope.row.apiVerStatus" />
            </template>
          </el-table-column>
          <el-table-column
            label="更新者"
            align="center"
            prop="updateBy"
            width="100"
          />
          <el-table-column
            label="更新时间"
            prop="updateTime"
            :show-overflow-tooltip="true"
            min-width="100"
          />
        </el-table>
        <div style="height: 16px"></div>
      </el-tab-pane>
<!--      <el-tab-pane label="能力使用" name="6">-->
<!--        <el-table :data="serviceList" style="margin-top: 10px">-->
<!--          <el-table-column-->
<!--            label="能力编码"-->
<!--            prop="serviceCode"-->
<!--            :show-overflow-tooltip="true"-->
<!--            min-width="100"-->
<!--          />-->
<!--          <el-table-column-->
<!--            label="能力名称"-->
<!--            prop="serviceName"-->
<!--            :show-overflow-tooltip="true"-->
<!--            min-width="100"-->
<!--          />-->
<!--          <el-table-column label="能力类型" width="100">-->
<!--            <template v-slot="scope">-->
<!--              <span>{{-->
<!--                selectDictLabel(apiTypeOptions, scope.row.serviceType)-->
<!--              }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="能力方式" min-width="80">-->
<!--            <template v-slot="scope">-->
<!--              {{ handleServiceReleaseTypeText(scope.row.serverReleaseType) }}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="请求路径"-->
<!--            prop="mockUrl"-->
<!--            :show-overflow-tooltip="true"-->
<!--            min-width="100"-->
<!--          />-->
<!--          <el-table-column-->
<!--            label="版本"-->
<!--            prop="serviceVersion"-->
<!--            align="center"-->
<!--            width="60"-->
<!--          >-->
<!--            <template v-slot="scope">-->
<!--              <span>{{ `V${scope.row.serviceVersion}` }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="状态"-->
<!--            prop="serviceVerStatus"-->
<!--            align="center"-->
<!--            width="80"-->
<!--          >-->
<!--            <template v-slot="scope">-->
<!--              <status-tag :status="scope.row.serviceVerStatus" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        <div class="pagination">-->
<!--          <pagination-->
<!--            v-show="total > 0"-->
<!--            :total="total"-->
<!--            :page="queryParams.pageNum"-->
<!--            :limit="queryParams.pageSize"-->
<!--            @pagination="doGetServiceList"-->
<!--          />-->
<!--        </div>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import {
  reqHeaderSearch,
  resHeaderSearch,
  searchAllByEntity,
  getServiceList,
} from "@/api/conn/api/index.js";
import StatusTag from "./components/status-tag.vue";
import { handleServiceReleaseTypeText } from "@conn/api/conn/api/config/statusOptions.js";
export default {
  name: "row-details",
  components: { StatusTag },
  props: {
    rowInfo: {
      type: Object,
      default: () => {},
    },
    showVersion: {
      type: Boolean,
      default: true,
    },
    visible: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.getDicts("conn_protocol_type").then((response) => {
      this.apiTypeOptions = response.data;
    });
  },
  data() {
    return {
      activeName: "1",
      versionList: [],
      reqHeaderList: [],
      resHeaderList: [],
      apiTypeOptions: [],
      nodeTypeList: [
        { dictValue: "string", dictLabel: "字符串 (String)" },
        { dictValue: "long", dictLabel: "整数 (Long)" },
        { dictValue: "decimal", dictLabel: "小数 (Decimal)" },
        { dictValue: "object", dictLabel: "对象 (Object)" },
        { dictValue: "array", dictLabel: "数组 (Array)" },
      ],
      serviceList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.activeName = "1";
      }
    },
  },
  methods: {
    handleServiceReleaseTypeText,
    async handleClick() {
      if (this.activeName === "5") {
        this.versionList = [];
        const res = await searchAllByEntity(this.rowInfo.apiId);
        this.versionList = res.data || [];
      }
      if (this.activeName === "2") {
        this.getHeaderList();
      }
      if (this.activeName === "6") {
        this.doGetServiceList();
      }
    },
    getHeaderList() {
      this.reqHeaderList = [];
      this.resHeaderList = [];
      const params = {
        apiId: this.rowInfo.apiId,
        apiVerId: this.rowInfo.apiVerId,
        apiVersion: this.rowInfo.apiVersion,
      };
      reqHeaderSearch(params).then((response) => {
        this.reqHeaderList = response.data;
      });
      resHeaderSearch(params).then((response) => {
        this.resHeaderList = response.data;
      });
    },
    async doGetServiceList() {
      const params = {
        ...this.queryParams,
        apiId: this.rowInfo.apiId,
      };
      if (!this.showVersion) {
        params.apiVersion = this.rowInfo.apiVersion;
      }
      this.serviceList = []
      return
      const res = await getServiceList(params);
      this.total = res.data.total;
      this.serviceList = res.data.list;
    },
  },
};
</script>

<style lang="scss" scoped>
:deep .el-form-item {
  margin-bottom: 0px;
}
</style>
